<template>
  <div class="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
    <div class="bg-white dark:bg-gray-800 rounded-xl p-6 max-w-2xl w-full mx-4 max-h-[90vh] overflow-y-auto">
      <!-- 标题栏 -->
      <div class="flex justify-between items-center mb-6">
        <div class="flex items-center gap-3">
          <div class="w-10 h-10 rounded-full bg-gradient-to-r from-primary to-secondary flex items-center justify-center">
            <i class="fa fa-question-circle text-xl text-white"></i>
          </div>
          <h3 class="text-xl font-bold">玩法介绍</h3>
        </div>
        <button @click="$emit('close')" class="text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300">
          <i class="fa fa-times"></i>
        </button>
      </div>

      <!-- 内容区 -->
      <div class="space-y-6 text-gray-600 dark:text-gray-300">
        <!-- 什么是海龟汤 -->
        <div>
          <h4 class="font-bold text-lg mb-2 flex items-center gap-2">
            <i class="fa fa-info-circle text-primary"></i>
            什么是海龟汤？
          </h4>
          <p class="leading-relaxed">
            海龟汤是一种推理问答游戏，AI会给出一个看似离奇的故事结局，你需要通过提问来逐步还原事情的真相。这就像煲汤一样，需要慢慢品味才能尝到汤的真味道。
          </p>
        </div>

        <!-- 游戏规则 -->
        <div>
          <h4 class="font-bold text-lg mb-2 flex items-center gap-2">
            <i class="fa fa-book text-primary"></i>
            游戏规则
          </h4>
          <div class="space-y-3">
            <div class="flex items-start gap-3 bg-gray-50 dark:bg-gray-700/50 p-3 rounded-lg">
              <div class="w-8 h-8 rounded-full bg-blue-100 dark:bg-blue-900/50 flex-shrink-0 flex items-center justify-center">
                <i class="fa fa-comment text-primary"></i>
              </div>
              <div>
                <h5 class="font-medium mb-1">提问限制</h5>
                <p class="text-sm">只能问封闭式问题（可用"是/否"回答的问题），AI 只会回答"是"、"否"或"无关"。</p>
              </div>
            </div>
            <div class="flex items-start gap-3 bg-gray-50 dark:bg-gray-700/50 p-3 rounded-lg">
              <div class="w-8 h-8 rounded-full bg-green-100 dark:bg-green-900/50 flex-shrink-0 flex items-center justify-center">
                <i class="fa fa-lightbulb-o text-green-600 dark:text-green-400"></i>
              </div>
              <div>
                <h5 class="font-medium mb-1">提示系统</h5>
                <p class="text-sm">每局游戏有 3 次获取提示的机会，合理使用可以帮助你更快接近真相。</p>
              </div>
            </div>
            <div class="flex items-start gap-3 bg-gray-50 dark:bg-gray-700/50 p-3 rounded-lg">
              <div class="w-8 h-8 rounded-full bg-yellow-100 dark:bg-yellow-900/50 flex-shrink-0 flex items-center justify-center">
                <i class="fa fa-star text-yellow-600 dark:text-yellow-400"></i>
              </div>
              <div>
                <h5 class="font-medium mb-1">获胜条件</h5>
                <p class="text-sm">当你认为已经推理出真相时，可以提交答案。只要答案包含关键信息即算猜对。</p>
              </div>
            </div>
          </div>
        </div>

        <!-- 游戏技巧 -->
        <div>
          <h4 class="font-bold text-lg mb-2 flex items-center gap-2">
            <i class="fa fa-trophy text-primary"></i>
            推理技巧
          </h4>
          <ul class="list-disc pl-5 space-y-2 text-sm">
            <li>从基本信息开始问起（时间、地点、人物关系等）</li>
            <li>注意关键词和细节，它们往往暗藏玄机</li>
            <li>大胆假设，小心求证，不要被表象迷惑</li>
            <li>适时使用提示，它可能会给你新的思路</li>
          </ul>
        </div>

        <!-- 示例问题 -->
        <div class="bg-blue-50 dark:bg-blue-900/30 p-4 rounded-lg">
          <h4 class="font-bold mb-2">示例问题参考</h4>
          <div class="space-y-1 text-sm">
            <p>✅ "这件事发生在晚上吗？"</p>
            <p>✅ "主角是一个男性吗？"</p>
            <p>✅ "这个地点在室内吗？"</p>
            <p>❌ "为什么会这样？"（开放式问题）</p>
            <p>❌ "然后发生了什么？"（开放式问题）</p>
          </div>
        </div>
      </div>

      <!-- 底部按钮 -->
      <div class="mt-6 text-center">
        <button 
          @click="$emit('close')" 
          class="px-8 py-3 bg-gradient-to-r from-primary to-secondary text-white rounded-xl shadow-lg hover:shadow-xl transform hover:scale-105 transition-all font-medium"
        >
          开始游戏
        </button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'HowToPlay'
}
</script>